<template>
	<view class="content">
		<view class="card" v-for="(site,key) in list" :key="key">
			<view class="card_title">{{site.title}}</view>
			<view class="flex">
				<view class="card_cnt" v-for="(item,k) in site.card" :key="k" :class="{hide:!item}" @tap="handel(`${key}${k}`)">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list:[
					{title:"客户端与云函数通信方式",card:["restful","callfunction","云对象","clientDB"]},
					{title:"客户端操作数据库",card:["unicloud-db","JQL",""]},
					{title:"客户端上传文件到云存储",card:["uploadFile","",""]},
					{title:"云函数操作云数据库",card:["API","","",""]},
				]
			}
		},
		onLoad() {

		},
		methods: {
			handel:(key)=>{
				const obj = {
					"00":"/pages/restful/index",
					"01":"/pages/callFunction/index",
					"02":"/pages/cloudObj/index",
					"03":"/pages/unicloud-db/index",
					"10":"/pages/unicloud-db/index",
					"11":"/pages/unicloud-db/index",
					"20":"/pages/uploadFile/index",
					"30":"/pages/restful/index"
				}
				uni.navigateTo({
					url:obj[key]
				})
				console.log(key,"key")
			},
			visite() {
				uni.request({
					method: 'POST',
					url: 'https://3323be55-2f5a-41db-aad3-868c1e63a55b.bspapp.com/visite',
					data: {
						a: 1,
						b: 2
					},
					success(res) {
						console.log("res", res);
					}
				})
			},
			callFunction(){
				uniCloud.callFunction({
					name: 'visite',
					data: {
						a: 1
					},
					success(res) {
						console.log("res", res)
					},
					fail() {},
					complete() {}
				});
			},
			async  cloudObj () {
				const visiteObj = uniCloud.importObject('visite-obj') //第一步导入云对象
				try {
					const res = await visiteObj.visite('title demo', 'content demo') //导入云对象后就可以直接调用该对象的方法了，注意使用异步await
					uni.showToast({
						title: '请求成功'
					})
				} catch (e) {
					// 符合uniCloud响应体规范 https://uniapp.dcloud.net.cn/uniCloud/cf-functions?id=resformat，自动抛出此错误 
					uni.showModal({
						title: '创建失败',
						content: e.errMsg,
						showCancel: false
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.card{
	padding : 0 30rpx;
	&:first-child{
		margin-top: 40rpx;
	}
	&_title{
		font-size: 32rpx;
		color: #000;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	&_cnt{
		width:200rpx;
		height: 200rpx;
		border:1px solid #5c5c5c;
		@extend .flex;
		justify-content: center !important;
		margin-bottom: 24rpx;
		border-radius: 40rpx;
	}
}
.flex{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
}
.hide{
	visibility: hidden;
}
</style>
